<template>
	<HeaderNav active-index="1"></HeaderNav>
	
	<!-- 添加标题 -->
	<div class="page-title">
		<h2>XXXX 班级学生任务完成情况</h2>
	</div>
	
	<TaskContainer>
	  <div class="task-center-content">
		<!-- 图表展示 -->
		<div class="chart-section">
		  <el-card 
			shadow="hover" 
			v-for="(student, index) in list" 
			:key="student.id" 
			class="student-card"
		  >
			<div :id="'task-chart-' + student.id" class="chart"></div>
			<div class="card-actions">
			  <el-button type="warning" size="small" @click="handleApplyTask(index, student)">
				<template #icon>
				  <el-icon><Document /></el-icon>
				</template>
				分配任务
			  </el-button>
			  <el-button type="info" size="small" @click="handlerResetPassword(index, student)">
				<template #icon>
				  <el-icon><Refresh /></el-icon>
				</template>
				重置密码
			  </el-button>
			  <el-button type="danger" size="small" @click="handleDelete(index, student)">
				<template #icon>
				  <el-icon><Lock /></el-icon>
				</template>
				禁用用户
			  </el-button>
			</div>
		  </el-card>
		</div>
	  </div>
	</TaskContainer>
	<!-- 添加底部备案信息 -->
	<Footor></Footor>


	<el-dialog v-model="showDialog" title="分配任务" width="70%" top="10px">
		<GroupTaskListView />
		<template #footer>
		<div class="dialog-footer">
			<el-button type="primary" @click="showDialog = false">保存</el-button>
			<el-button @click="showDialog = false">关闭</el-button>
		</div>
		</template>
	</el-dialog>
</template>
	
<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Footor from "@/components/Footor.vue"
import * as echarts from 'echarts'; 
import GroupTaskListView from "../group/GroupTaskListView.vue";
export default {
	components: {
		HeaderNav,
		TaskContainer, 
		Footor,
		GroupTaskListView, 
	},
	data() {
		return {
			showDialog: false,
			list: [
				{
				id: 1,
				email: 'zhangsan@sina.com', 
				name: '张三' ,
				task_total_count: 100,
				task_count_1 : 30,
				task_count_2 : 50,
				task_ncount: 20,
				task_rate: 39,
				},
				{
				id: 2,
				email: 'lisi@sina.com',
				name: '李四',
				task_total_count: 100,
				task_count_1 : 25,
				task_count_2 : 45,
				task_ncount: 30,
				task_rate: 45,
				},
				{
				id: 3,
				email: 'wangwu@sina.com',
				name: '王五',
				task_total_count: 100,
				task_count_1 : 20,
				task_count_2 : 40,
				task_ncount: 40,
				task_rate: 50,
				},
				{
				id: 4,
				email: 'zhaoliu@sina.com',
				name: '赵六',
				task_total_count: 100,
				task_count_1 : 15,
				task_count_2 : 35,
				task_ncount: 50,
				task_rate: 55,
				},
				{
				id: 5,
				email: 'sunqi@sina.com',
				name: '孙七',
				task_total_count: 100,
				task_count_1 : 10,
				task_count_2 : 30,
				task_ncount: 60,
				task_rate: 60,
				},
				{
				id: 6,
				email: 'zhouba@sina.com',
				name: '周八',
				task_total_count: 100,
				task_count_1 : 5,
				task_count_2 : 25,
				task_ncount: 70,
				task_rate: 65,
				},
				{
				id: 7,
				email: 'wuma@sina.com',
				name: '吴九',
				task_total_count: 100,
				task_count_1 : 0,
				task_count_2 : 20,
				task_ncount: 80,
				task_rate: 70,
				},
				{
				id: 8,
				email: 'zhangshi@sina.com',
				name: '张十',
				task_total_count: 100,
				task_count_1 : 10,
				task_count_2 : 15,
				task_ncount: 75,
				task_rate: 75,
				},
				{
				id: 9,
				email: 'lisiyao@sina.com',
				name: '李十一',
				task_total_count: 100,
				task_count_1 : 20,
				task_count_2 : 10,
				task_ncount: 70,
				task_rate: 80,
				},
				{
				id: 10,
				email: 'wangshi@sina.com',
				name: '王十二',
				task_total_count: 100,
				task_count_1 : 30,
				task_count_2 : 5,
				task_ncount: 65,
				task_rate: 85,
				},
				{
				id: 11,
				email: 'zhangsan2@sina.com',
				name: '张三二',
				task_total_count: 100,
				task_count_1 : 28,
				task_count_2 : 48,
				task_ncount: 24,
				task_rate: 40,
				},
				{
				id: 12,
				email: 'lisi2@sina.com',
				name: '李四二',
				task_total_count: 100,
				task_count_1 : 22,
				task_count_2 : 42,
				task_ncount: 36,
				task_rate: 46,
				},
				{
				id: 13,
				email: 'wangwu2@sina.com',
				name: '王五二',
				task_total_count: 100,
				task_count_1 : 18,
				task_count_2 : 38,
				task_ncount: 44,
				task_rate: 51,
				},
				{
				id: 14,
				email: 'zhaoliu2@sina.com',
				name: '赵六二',
				task_total_count: 100,
				task_count_1 : 14,
				task_count_2 : 34,
				task_ncount: 52,
				task_rate: 56,
				},
				{
				id: 15,
				email: 'sunqi2@sina.com',
				name: '孙七二',
				task_total_count: 100,
				task_count_1 : 12,
				task_count_2 : 32,
				task_ncount: 56,
				task_rate: 61,
				},
				{
				id: 16,
				email: 'zhouba2@sina.com',
				name: '周八二',
				task_total_count: 100,
				task_count_1 : 8,
				task_count_2 : 28,
				task_ncount: 64,
				task_rate: 66,
				},
				{
				id: 17,
				email: 'wuma2@sina.com',
				name: '吴九二',
				task_total_count: 100,
				task_count_1 : 4,
				task_count_2 : 24,
				task_ncount: 72,
				task_rate: 71,
				},
				{
				id: 18,
				email: 'zhangshi2@sina.com',
				name: '张十二',
				task_total_count: 100,
				task_count_1 : 12,
				task_count_2 : 18,
				task_ncount: 70,
				task_rate: 76,
				},
				{
				id: 19,
				email: 'lisiyao2@sina.com',
				name: '李十一二',
				task_total_count: 100,
				task_count_1 : 22,
				task_count_2 : 12,
				task_ncount: 66,
				task_rate: 81,
				},
				{
				id: 20,
				email: 'wangshi2@sina.com',
				name: '王十二二',
				task_total_count: 100,
				task_count_1 : 32,
				task_count_2 : 8,
				task_ncount: 60,
				task_rate: 86,
				},
			],
			
		}
	},
	mounted() {
		this.list.forEach(student => {
			this.initChart(student);
		});
	},
	methods: {
		initChart(student) {
			const chartDom = document.getElementById('task-chart-' + student.id);
			const myChart = echarts.init(chartDom);
			const option = {
				title: {
					text: student.name,
					subtext: student.email,
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['未开始', '未检查', '不会做']
				},
				series: [
					{
						name: '任务状态',
						type: 'pie',
						radius: '50%',
						label: {
							position: 'inside',
							formatter: '{c}',
						},
						data: [
							{ value: student.task_count_1, name: '未开始' },
							{ value: student.task_count_2, name: '未检查' },
							{ value: student.task_ncount, name: '不会做' },
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			myChart.setOption(option);
		},
		handleApplyTask(index, student) {
			this.showDialog = true ;
		},
		handlerResetPassword(index, student) {
			this.$layer.confirm("您确定要将密码重置为【123456】吗?", $index => {
				this.$layer.close($index);
			})
		},
		handleDelete(index, student) {
			this.$layer.confirm("您确定要禁用该用户吗?", $index => {
				this.$layer.close($index);
			})
		}
	}
}
</script>

<style scoped>
.task-center-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 50px 100px; /* 添加左右两侧的空间 */
	background: linear-gradient(135deg, #151824 0%, #1c1f35 100%);
}

.page-title {
	text-align: left;
	margin: 20px 50px;
	color: #f9f9f9;
}

.chart-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.student-card {
	flex: 0 1 calc(20% - 20px); /* 每行展示5个学生，减去间距 */
	box-sizing: border-box;
}

.chart {
	width: 100%;
	height: 200px; /* 调整图表高度以适应布局 */
}

.card-actions {
	display: flex;
	justify-content: space-around;
	margin-top: 10px;
}

</style>